<template>
    <biz-form-remote-select :placeholder="placeholder" :remote-method="remoteMethod" :value="productId" cleared
        @input="selectProduct" @focus='focus'>
        <div class="service-template-option" slot="option" slot-scope="{ option }">
            <h3 class="option-list-name">{{ option.name }}</h3>
            <p class="service-template-option-content">
                <span class="service-template-option-content-text">
                    <label>{{ $t('common.base.serialNumber') }}：</label>
                    <span>{{ option.serialNumber }}</span>
                </span>
                <span class="service-template-option-content-text">
                    <label>{{ $t('common.base.type') }}：</label>
                    <span>{{ option.type }}</span>
                </span>
                <span class="service-template-option-content-text">
                    <label>{{ $t('common.base.contact') }}：</label>
                    <span v-if="option.linkman">{{ option.linkman.name || '' }}</span>
                    <span v-else class="unbind-name">{{ $t('common.base.notContact') }}</span>
                </span>
            </p>
        </div>
    </biz-form-remote-select>
</template>
  
<script>
import * as ProductApi from '@src/api/ProductApi';
import i18n from '@src/locales';

export default {
    name: 'select-product',
    data() {
        return {
            productList: [],
            productId: [],
            params: {
                keyword: '',
                pageNum: 0,
                pageSize: 10,
                // qrcodeState: this.qrcodeState
            }
        }
    },
    props: {
        placeholder: {
            type: String,
            default: i18n.t('product.tips.selectProductTip')
        },
        value: {
            type: Array,
            default: () => []
        },
        qrcodeState: {
            type: Number,
            default: 0   // 0 - 未关联，1 - 已关联
        },
        selectedProduct: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        clear() {
            this.productId = [];
        },
        focus() {
            this.params.pageNum = 0;
            this.params.keyword = '';
        },
        remoteMethod(params) {
            const { keyword } = params;
            if (keyword) {
                this.params.pageNum = 1;
                this.params.keyword = keyword;
            } else {
                this.params.pageNum++;
            }
            return ProductApi.getProductV2(this.params).then(res => {
                const { result } = res;
                if (!res || !result) return;
                const list = result.content.map((product) =>
                    Object.freeze({
                        label: product.name,
                        value: product.id,
                        ...product,
                    })
                );
                res.hasNextPage = result.totalPages > result.number;
                res.total = result.totalElements;
                if (Array.isArray(res.list)) {
                    res.list = res.list.concat(list);
                } else {
                    res.list = list;
                }
                return res;
            });
        },
        selectProduct(val) {
            this.params.pageNum = 0;
            this.productId = val;
            this.$emit('input', val);
        },
    }
}
</script>
  
<style lang="scss" scoped>
.service-template-option {
    padding: 5px 0;
    min-height: 58px;

    h4 {
        height: 26px;
        line-height: 26px;
    }
}

.service-template-option-content {
    &-text {
        display: flex;
        width: 35%;

        label {
            padding-top: 0;
            word-break: keep-all;
        }

        span {
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .unbind-name {
            color: #bfbfbf;
        }

    }
}
</style>
  
<style lang="scss">
.list-wrapper {
    .option-list {
        font-size: 12px;

        .option-name {
            font-size: 14px;
            font-weight: bold;
            color: #606266;
        }

        li {
            &:hover {
                background-color: #f5f7fa;
            }
        }

        li.selected {
            background: #fff;

            .service-template-option-content>* {
                font-weight: bold;
                color: #666;
            }

            .option-list-name {
                color: #13c2c2;
            }

            &:hover {
                background-color: #e7f9f9;
            }
        }
    }
}
</style>